import React from 'react'
// ===================================================================== Temp
import SubmitForm from '#cpt/temp/SubmitForm'
import Table from '#cpt/temp/Table'
import Confirm from '#cpt/temp/Confirm'
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
 const { $fn, $Lazy, $http } = window
// ===================================================================== Lazy
const Page 				= $Lazy.load(()=>import('#tp/page/page-container'))
const Box 				= $Lazy.load(()=>import('#tp/box/box'))
const $cache 			= $Lazy.file (()=>import('#private/cache-api'))
const TableComponent 	= $Lazy.state(()=>import('./cpt/table-component'))
// ===================================================================== component
class Index extends React.Component{
 	state = {
		data:[],
		selectedKeys:[],
 		// 提交表单列表
 		formData : [
 			{ label: '计划名称',		name: 'title',  				half:true, 		required:true },
			{ label: '采样日期',		name: 'coll_time',  			half:true,		required:true, type:'date-time', format:1 },
			
			{ label: '接收时间',		name: 'rec_date',  				half:true,	required:true, type:'date-time', format:1, style:{paddingRight:5} },
			{ label: '',			name: 'rec_time_start',  		width:'24%',	required:true, type:'time', p:'请选择开始时间'},
			{ width:'2%', type:'cpt', component:<span className='g6 h30 plr5'>:</span>	},
			{ label: '',			name: 'rec_time_end',  			width:'24%',	required:true, type:'time', p:'请选择结束时间'},
			
			{ label: '报告时间',		name: 'report_date',			half:true, 	required:true, type:'date-time', format:1, br:true, style:{paddingRight:5} },
			{ label: '',			name: 'report_date_start',  	width:'24%',	required:true, type:'time', p:'请选择开始时间'},
			{ width:'2%', type:'cpt', component:<span className='g6 h30 plr5'>:</span>	},
			{ label: '',			name: 'report_date_end',  		width:'24%', 	required:true, type:'time', p:'请选择结束时间'},
			
			{ label: '提交人',	name: 'test_user',		width:'33%',	required:true, 	type:'select', loading:true },
			{ label: '审核人',	name: 'audit_user',		width:'33%',	required:true, 	type:'select', loading:true },
			{ label: '批准人',	name: 'approve_user',	width:'34%',	required:true, 	type:'select', loading:true },
 		]
 	}
	
 	componentDidMount(){
		this.fetch()
		this.getSelect()
 	}
	
	// 获取下拉数据
	getSelect = async () => {
		const { formData } = this.state
		$cache.then( async f => {
			// 提交人
			$fn.setRow(formData, 'test_user', await f.getCache({ api: 'employee/tsUserSelect', refresh:true, param:{ process_number:'FL10227', node_code:'FL1022710101' } } ) )
			// 审核人
			$fn.setRow(formData, 'audit_user', await f.getCache({ api: 'employee/tsUserSelect', refresh:true, param:{ process_number:'FL10228', node_code:'FL1022810101' } } ) )
			// 批准人
			$fn.setRow(formData, 'approve_user', await f.getCache({ api: 'employee/tsUserSelect', refresh:true, param:{ process_number:'FL10229', node_code:'FL1022910101' } } ) )
			//
			this.setState({ formData })
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'conf-report-date/index')
	
	// 表格
	cols = [
		{ title: '计划名称',		dataIndex: 'title', 		width:150 },
		{ title: '采样日期', 	dataIndex: 'coll_time', 	...$fn.table.time },
		{ title: '接收时间', 	dataIndex: 'rec_date', 		width:150 },
		{ title: '报告时间', 	dataIndex: 'report_date', 	width:150 },
	]
	
	// 操作按钮
	controls = () => [
		Confirm.call(this,'删除','conf-report-date/del', { isKeys:true, idStr:'ids' })
	]
	
	// 操作按钮
	controls2 = () => [
		Controls.click.call(this,'清空', ()=>{
			this.setState({ selectedKeys:[], info:null })
			this.tableComponentRef.load()
			this.formRef.reset()
		}, { isKeys:true, ghost:true }),
		Confirm.call(this,'清除计划','conf-report-date/delbindts', { query:{} }),
		Controls.click.call(this,'保存',()=> this.formRef.submit())
	]
	
 	render(){
		const { submitLoading, info } = this.state
 		return (
 			<Page title='报告单日期设置' nobc controls={this.controls()}>
				<div className='fx ex mb5'>
					<div className='ex bc fv bcf' style={{padding:'5px 5px 0'}}>
						{/* 表格 */}
						{ Table.call(this, { wrapClassName:' ', space:'h5', split:true, onRow: ({ uuid }) => {
							$http.submit(this,'conf-report-date/info', { param: { uuid },  onError:()=> this.setState({ info: null }) } ).then(info=>{
								this.setState({ info })
								this.formRef.reset()
								this.formRef.setValue(info)
								this.tableComponentRef.load(info)
							})
						}}) }
					</div>
					<Box className='ex' title='计划信息' full scroll first flex controls={this.controls2()} loading={submitLoading} scrollClassName='p10'>
						{ 
							SubmitForm.call(this,{ msg:'保存', labelWidth:'s6', hideButton:true,
								api: $fn.hasObject(info) ?  'conf-report-date/edit' : 'conf-report-date/add',
								getSubmit: () => $fn.hasObject(info) ? { uuid: info['uuid'] }  : {}
							})
						} 
					</Box>
				</div>
				<Box className='ex' title='列表信息' full flex contentClassName='fv'>
					<TableComponent onRef={ref => this.tableComponentRef = ref } />
				</Box>
 			</Page>
 		)
 	}
 }
 
 export default Index